<template>
  <div>
    <img src="../../assets/img/4.jpg" alt />
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" @click="goSecond">
      
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tongji2" />
          </svg>
          <div class="mui-media-body">产出统计</div>
        
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tongjitu" />
          </svg>
          <div class="mui-media-body">缺料统计</div>
        
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
       
         <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tongji1" />
          </svg>
          <div class="mui-media-body">工序产出统计</div>
       
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
       
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-techreport-" />
          </svg>
          <div class="mui-media-body">工序直通率</div>
       
      </li>
    </ul>
    <el-card class="box-card" id="one">
      <div slot="header" class="clearfix">
        <span>生产产出统计</span>
      </div>
      <div id="first" style="height:200px;width: 100%;margin-right: 20px;"></div>
    </el-card>
	<el-card class="box-card" id="two">
      <div slot="header" class="clearfix">
        <span>生产产出统计</span>
      </div>
      <div id="second" style="height:200px;width: 100%;margin-right: 20px;"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
	this.getNumber();
	this.getNumber1()
  },
  methods: {
    getNumber() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("first"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "ECharts"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["报销", "额外", "利率", "利润", "支出", "进账"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
	},
	 getNumber1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("second"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "生产产出统计"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["报销", "额外", "利率", "利润", "支出", "进账"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
	},
	goSecond(){
		 const anchorEle = document.querySelector("#two");
    if (!!anchorEle ) {
      anchorEle .scrollIntoView(true);
    }
	}
  }
};
</script>

<style scoped>
img {
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  height: 270px;
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.1em;
  fill: currentColor;
  overflow: hidden;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
  font-size: 14px;
}
</style>

